<template>
  <div>

     <myheader></myheader>
     	 
	<Breadcrumb :datas="datas"></Breadcrumb>
      <div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul> -->
	
			<div class="carousel-inner">
			
				<!-- Text only with background image
				<div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->
        <!-- 幻灯片组件 -->
        <Carousel :height="700" :datas="params" pageTheme="circle" @click="click">

        </Carousel>
				
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="featured-block text-center">
			<div class="container">
				<p>商品排行榜</p>
				<ul v-for="(item,index) in goodlist" :key="index">
					<li v-if="index<3" style="color:red">第{{index+1}}名---{{ item.name }}---访问量：{{ item.clicks }}</li>
					<li v-else>第{{index+1}}名---{{ item.name }}---访问量：{{ item.clicks }}</li>
				</ul>	
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">
					
					<div v-for="(item,index) in datalist" :key="index" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item/?gid='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
						<h4><a :href="'/editgood/?id='+item.id">修改商品</a></h4>
					</div>
				</div>
				<!-- 分页逻辑 -->
				<!-- <div>
					<Pagination v-model="pagination" @change="change" layout="pager"></Pagination>
				</div> -->
				<a @click="gopage(prev)">上一页</a>
           		<a v-for="(num,index) in nums" :key="index" @click="gopage(num)">{{num}}</a>
            	<a @click="gopage(next)">下一页</a>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		

	 <myfooter></myfooter>
 
		

    
  </div>
  
</template>


 
<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';


export default {
	//定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter
  },
  data () {
    return {
		datas:[{title:'首页',route:{name:'index'}}],
	  	msg: "这是一个变量",
	 	//分页器变量
		pagination:{
			page:1,
			size:2,
			total:5,
		},
		//自制分页器
		// 页数列表
		nums:[],
		//上一页
		prev:1,
		//下一页
		next:1,
      //幻灯片数据
      params:[
        {
          title:'第一张',
          link:'http://www.baidu.com',
          image:"http://localhost:8000/static/upload/touxiang3.jpg"
        },
        {
          title:'第二张',
          link:'http://www.baidu.com',
          image:"http://localhost:8000/static/upload/touxiang1.jpg"
        }
	  ],
	  datalist:[],
	  goodlist:[],
	  count:0
    }
  },
  //自定义过滤器
  filters:{

  		//自定义方法
  		myfilter:function(value){

			if(value in [1,2,3]){
				
			}
				return 
  		}

  },
  mounted:function(){
	//获取排行榜数据
	this.axios.get("http://127.0.0.1:8000/goodrank/").then(resp=>{
				// console.log(resp)
				this.goodlist = resp.data
				this.count = resp.data.length
				console.log(resp)
			})
	this.gopage()
    //幻灯片请求
    this.axios.get('http://localhost:8000/picsinfo/').then((result)=>{
		//赋值
		var mylist = result.data.data
		var datalist = [];

		//遍历
		for(let i=0,l=mylist.length;i<l;i++){

			datalist.push({title:mylist[i]['title'],link:mylist[i]['link'],image:mylist[i]['img']});

		}

		this.params = datalist;
	})
	// //发送请求
    //   this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

	// 	console.log(result);
	// 	this.datalist = result.data.data;

    //   });

},
  methods:{
    //幻灯片点击事件
    click(index,data){
      console.log(data)
      //点击后跳转具体页面
      window.location.href = data.link
  },
  //分页器事件
  change(){
	//发送请求
	this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((res)=>{

		this.datalist = res.data.data
	})
	},
	//自制分页器
	gopage:function(num){
            this.axios({
            url:'http://localhost:8000/goodslist/',
            params:{
                page:num
            }
        }).then((resp)=>{
            console.log(resp)
            this.datalist = resp.data.data
            this.nums = resp.data.nums
            this.prev = resp.data.prev
            this.next = resp.data.next
        })
    }
}
}

</script>
 
<style>



</style>